<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart1414"
      height="174px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    data () {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
    },
    watch: {
      cdata: {
        handler (newData) {
          this.options = {
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(255,255,255,0.1)",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  backgroundColor: "#7B7DDC"
                }
              }
            },
            legend: {
              data: ["已贯通", "计划贯通"],
              textStyle: {
                color: "#B4B4B4"
              },
              top: "0%"
            },
            grid: {
              x: "15%",
              bottom: "30",
              width: "80%"
            },
            xAxis: {
              data: newData.category,
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisTick: {
                show: false
              }
            },
            yAxis: [
              {
                splitLine: { show: false },
                axisLine: {
                  lineStyle: {
                    color: "#B4B4B4"
                  }
                },
                axisLabel: {
                  formatter: "{value}"
                }
              },
            ],
            series: [
              {
                name: "已贯通",
                type: "bar",
                barWidth: 10,
                itemStyle: {
                  normal: {
                    barBorderRadius: 5,
                    color: "#FFC328"
                      // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      // { offset: 0, color: "#956FD4" },
                      // { offset: 1, color: "#3EACE5" }
                    // ])
                  }
                },
                data: newData.barData
              },
              {
                name: "计划贯通",
                type: "bar",
                barGap: "-100%",
                barWidth: 10,
                itemStyle: {
                  normal: {
                    barBorderRadius: 5,
                    color: "#FF745A"
                      // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      // { offset: 0, color: "rgba(156,107,211,0.8)" },
                      // { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                      // { offset: 1, color: "rgba(156,107,211,0.2)" }
                    // ])
                  }
                },
                z: -12,
                data: newData.lineData
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
